import React, { lazy } from "react";
import Login from "../view/Login";
import { Navigate } from "react-router-dom";
const Home = lazy(() => import("../view/Home")); //懒加载
const Page1 = lazy(() => import("../view/Page/index"));
const Page2 = lazy(() => import("../view/Page/index2"));
const Page3 = lazy(() => import("../view/Page/index3"));
const Page4 = lazy(() => import("../view/Page/index4"));

const widthLoading = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>Loading</div>}>{comp}</React.Suspense>
);
//懒加载需要在外面套一层 Loading
const routes = [
  {
    path: "/",
    element: <Navigate to="/page1"></Navigate>,
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/page1",
        element: widthLoading(<Page1 />),
      },
      {
        path: "/page2",
        element: widthLoading(<Page2 />),
      },
      {
        path: "/page3",
        element: widthLoading(<Page4 />),
        children: [
          {
            path: "/page3/page4",
            element: widthLoading(<Page4 />),
          },
        ],
      },
    ],
  },
  {
    path:'*',
    element: <Navigate to="/page1"></Navigate>,//访问到非展示页面的重定向
  },
  {
    path: "/login",
    element: <Login />,
  },
];
export default routes;
